<template>
  <div>
    <div class="outdiv biaoti">车主卡</div>
    <hr style="height:1px;border: none;border-top:1px solid #ddd;">


    <div class="outdiv">
      <div class="search clear">
        <div class="block lfloat">
          <el-input style="width:16rem;margin-right:1rem" v-model="searchCarUser"
            placeholder="请输入用户姓名或电话" clearable></el-input>

          <!--得到的时间是一个string，不需转换-->
          <el-date-picker style="margin-right:1rem" v-model="datavalue" type="datetime"  value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
          <el-tooltip content="搜索" placement="top">
            <el-button type="primary" icon="el-icon-search"  @click="search" circle plain></el-button>
          </el-tooltip>
          <el-tooltip content="重置" placement="top">
            <el-button @click="clearSearch" type="danger" icon="el-icon-refresh"  circle plain></el-button>
          </el-tooltip>

          <!--<el-button @click="search" type="primary" icon="el-icon-search" size="small">查询</el-button>
          <el-button @click="clearSearch" type="primary" icon="el-icon-refresh" size="small">重置</el-button>-->
        </div>

        <div style="float: right">
          <el-tooltip content="添加车主卡" placement="top">
            <el-button type="primary" circle plain  @click="addUser" icon="el-icon-plus"></el-button>
          </el-tooltip>

          <el-tooltip content="导出数据" placement="top">
            <el-button type="warning" circle plain icon="el-icon-share" @click="exportExcel"></el-button>
          </el-tooltip>

          <!--<el-tooltip content="列表" placement="top">
            <el-button type="danger" circle plain @click="lieBiao" icon="el-icon-s-unfold"></el-button>
          </el-tooltip>

          <el-tooltip content="卡片" placement="top">
          <el-button type="primary" circle plain @click="kaPian" icon="el-icon-s-grid"></el-button>
          </el-tooltip>-->
        </div>

      </div>

    <!--        表格-->
    <template>
      <el-table  @selection-change="SelectionChange" class="shangjuli xiajuli" :style=liebiao v-loading="loading" element-loading-text="加载中" :data="elTableData"
        style="width: 100%;" max-height="340">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="owner_card_id" label="ID" min-width="80"></el-table-column>
        <el-table-column prop="user_name" label="用户名" min-width="120"></el-table-column>
        <el-table-column prop="vehicle_name" label="行驶证车主姓名" min-width="120"></el-table-column>
        <el-table-column prop="user_phone" label="手机号" min-width="120"></el-table-column>
        <el-table-column prop="car_license_num" label="车牌号" min-width="120"></el-table-column>
        <el-table-column prop="car_specific_models_desc" label="车辆具体型号" min-width="120"></el-table-column>
        <el-table-column prop="owner_first_date" label="车辆初登日期" min-width="120"></el-table-column>
        <el-table-column prop="vehicle_license_address" label="图片" width="180">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 60px"
              :src="'http://106.14.247.137:8080'+scope.row.vehicle_license_address"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="80">
          <template slot-scope="scope">
            <el-tooltip content="修改" placement="top">
              <el-button @click="xiuGaiClick(scope.row)" type="primary"  icon="el-icon-edit" plain circle></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!--<div :style=kapian style="width: 100%;text-align: center;font-size: 1.1rem;margin-top: 10px" class="clear">
      <div class="carCart" v-for="(item) in elTableData">
        <div style="font-size: 2rem;position: absolute;right: 1rem;top: 1rem;font-weight: 500;">
          ID：{{item.owner_card_id}}</div>
        <div>用户名：{{item.user_name}}</div>
        <div>行驶证姓名：{{item.vehicle_name}}</div>
        <div>电话号码：{{item.user_phone}}</div>
        <div>车辆品牌：{{item.brand_name}}</div>
        <div>车牌号：{{item.car_license_num}}</div>
        <div>车辆初登日期：{{item.owner_first_date}}</div>
        <div>
          车辆图片：<br>
          <img :src="'http://172.16.10.111:8080'+item.vehicle_license_address" alt=""
            style="width: 10rem;height: 7rem;margin-left: 6rem">
        </div>
        <div style="position: absolute;right: 1rem;bottom: 1rem">
          <el-button @click="xiuGaiClick(item)" type="danger" plain circle icon="el-icon-edit" size="small"></el-button>
        </div>
      </div>
    </div>-->

    <!--    导出表格数据-->
    <el-table :data="XuanZhongData" style="display: none" id="table">
      <el-table-column prop="owner_card_id" label="ID" min-width="80"></el-table-column>
      <el-table-column prop="user_name" label="用户名" min-width="120"></el-table-column>
      <el-table-column prop="vehicle_name" label="行驶证车主姓名" min-width="120"></el-table-column>
      <el-table-column prop="user_phone" label="手机号" min-width="120"></el-table-column>
      <el-table-column prop="car_license_num" label="车牌号" min-width="120"></el-table-column>
      <el-table-column prop="car_specific_models_desc" label="车辆具体型号" min-width="120"></el-table-column>
      <el-table-column prop="owner_first_date" label="车辆初登日期" min-width="120"></el-table-column>
    </el-table>

    <!--        页码-->
    <div class="fenPage">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage4" :page-sizes="[3,8,12]" :page-size=this.pageSize
        layout="total, sizes, prev, pager, next, jumper" :total=tableData.length>
      </el-pagination>
    </div>

    </div>
    <!--        弹窗-->
    <carCardForm :title="biaoti" :state="dialogFormVisible" :carFormData="form" @quxiaotanKuang="quxiao"></carCardForm>
  </div>
</template>

<script>
  import jiangMethod from '../../utils/jiangMethod'
  import carCardForm from "../../components/guanli/carCardForm";
  import * as api from "../../utils/api"
  import FileSaver from "file-saver";
  import XLSX from "xlsx";
  export default {
    name: "chezhuka",
    components: {
      carCardForm
    },
    data() {
      return {
        loading: true,
        kapian: 'display: block',
        liebiao: 'display: block',
        searchCarUser: '',
        datavalue: '',
        XuanZhongData:[],

        dialogFormVisible: false,
        form: {
          user_name: '',
          user_id: '',
          user_phone: '',
          vehicle_name: '',
          user_idnum: '',
          car_license_num: '',
          user_ping_pai: '',
          owner_first_date: '',
          user_img_src: '',
          brand_id:'',
          car_model_id:'',
          car_specific_models_id: '',
          car_id: '',
          owner_card_id: '',
          vehicle_license_id: '',
          vehicle_license_address: ''
        },
        biaoti: '',

        tableData: [],
        imgUrl: [],


        //分页
        currentPage4: 1,
        elPage: 1,
        pageSize: 3,
      }
    },
    computed: {
      elTableData() {
        let kaiShi = (this.elPage - 1) * this.pageSize
        let jieShu = (this.elPage - 1) * this.pageSize + this.pageSize
        return this.tableData.slice(kaiShi, jieShu)
      }
    },
    created() {
      this.searchData(null, null)
    },
    methods: {
      SelectionChange(val){
        this.XuanZhongData=val
      },
      // 导出
      exportExcel() {
        let wb = XLSX.utils.table_to_book(document.querySelector('#table')); // 这里就是表格
        let wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
        });
        try {
          FileSaver.saveAs(new Blob([wbout], {
            type: 'application/octet-stream'
          }), 'table.xlsx'); //table是自己导出文件时的命名，随意
        } catch (e) {
          if (typeof console !== 'undefined')
            console.log(e, wbout)
        }
        return wbout
      },

      lieBiao() {
        this.kapian = 'display: none'
        this.liebiao = 'display: block'
      },
      kaPian() {
        this.kapian = 'display:block'
        this.liebiao = 'display: none'
      },
      //重置  清除搜索选项，请求所有数据重新渲染页面
      clearSearch() {
        this.$message({
          showClose: true,
          type: "success",
          message: '重置数据中'
        })
        this.searchCarUser = ''
        this.datavalue=''

        this.searchData(null, null)
      },
      //条件查询 发起请求的函数
      searchData(userOrTel, riQi) {
        this.loading = true
        this.axios({
          method: 'get',
          url: api.queryOwnerCard,
          params: {
            userName: userOrTel,
            ownerFirstDate: riQi
          }
        }).then(data => {
          console.log(data)
          if (data.data.code === 200) {
            this.elPage = 1
            this.tableData = data.data.data
            this.tableData.map(item => {
              item.vehicle_license_address = item.vehicle_license_address.substring(1)
            })
          } else {
            this.$message({
              type: 'error',
              message: data.data.msg
            })
          }
          this.loading = false
        })
      },
      //条件查询的条件  调用发起请求的函数
      search() {
        //输入电话或用户名进行查询
        if (jiangMethod.yanzheng(this.searchCarUser) && this.datavalue === '') {
          // console.log('电话，用户名没问题')
          this.$message({
            showClose: true,
            type: "success",
            message: '数据搜索中'
          })
          this.searchData(this.searchCarUser, this.datavalue)
        }
        //输入时间进行查询
        else if (this.datavalue != '' && jiangMethod.yanzheng(this.searchCarUser) === false || this.datavalue != '' && this.searchCarUser === '') {
          // console.log('时间没问题')
          this.$message({
            showClose: true,
            type: "success",
            message: '数据搜索中'
          })
          this.searchCarUser = null
          this.searchData(this.searchCarUser, this.datavalue)
        }
        //输入电话或用户名和时间进行查询
        else if (jiangMethod.yanzheng(this.searchCarUser) && this.datavalue != '') {
          // console.log('都没有问题')
          this.$message({
            showClose: true,
            type: "success",
            message: '数据搜索中'
          })
          this.searchData(this.searchCarUser, this.datavalue)
        } else {
          this.$message({
            type: 'error',
            message: '输入有误'
          })
        }

      },
      //添加车主卡
      addUser() {
        this.biaoti = '添加车主卡'
        this.dialogFormVisible = true
      },
      //修改车主卡
      xiuGaiClick(val) {
        this.biaoti = '修改车主卡'
        // console.log(val)
        this.form = {
          ...val
        }
        this.axios({
          method: 'get',
          url: api.queryUser,
          params: {
            userName: val.user_phone
          }
        }).then(data => {
          // console.log(data)
          this.form.user_id = data.data.data[0].user_id
        })
        // console.log(this.form)
        this.dialogFormVisible = true
      },





      //弹框取消
      quxiao() {
        this.searchData(null, null)
        this.dialogFormVisible = false
        this.form = {
          user_name: '',
          user_id: '',
          user_phone: '',
          vehicle_name: '',
          user_idnum: '',
          car_license_num: '',
          user_ping_pai: '',
          owner_first_date: '',
          user_img_src: '',
          car_specific_models_id: '',
          car_id: '',
          owner_card_id: '',
          vehicle_license_id: '',
          vehicle_license_address: ''
        }
      },
      // 每页显示条数
      handleSizeChange(val) {
        this.pageSize = val
      },
      // 当前页码
      handleCurrentChange(val) {
        this.elPage = val
      }
    }
  }
</script>

<style lang="less" scoped>
  .clear:after {
    content: '';
    display: block;
    clear: both;
  }

  .leftTopCz {
    float: left;
    text-align: left;
    margin: 0 0 2rem;
    width: 100%;

    .search {
      /*border: 1px solid red;*/
      margin: 2rem 0;

      .el-input {
        width: 20rem;
        border: 1px solid deepskyblue;
        margin-right: 2rem;
      }

      .block {
        display: inline-block;
      }

      /*.el-date-picker{

      }*/
    }
  }

  .fenPage {
    width: 100%;
    /*border: 1px solid red;*/
    text-align: center;
    // margin: 1rem 0;
  }

  .carCart {
    position: relative;
    text-align: left;
    /*border: 1px solid darkgray;*/
    width: 22.5rem;
    height: 16.5rem;
    margin: 1rem;
    padding: 1rem;
    float: left;
    background-color: #ECF5FF;
    /*background-image: linear-gradient(to top left , #87fff7, #d2ff6c);*/
  }
</style>